<template>
  <view class="group-class">
    <view class="store-list">
      <view class="store-item" v-for="store in storeList" :key="store.id">
        <view class="store-info">
          <view class="store-name">{{ store.branch.name }}</view>
          <view class="store-distance">{{ store.branch.distance.toFixed(2) }}km</view>
          <image class="expand-icon" :src="commonStore.baseImageUrl +
            'test-yujia/reservation/sanjiao-icon.png'
            "></image>
        </view>
        <course-list :courses="store.courseList"></course-list>
      </view>
    </view>
  </view>
</template>

<script setup>
import courseList from "@/components/CourseList.vue";
import { useCommonStore } from "@/store";
import { ref } from "vue";

const commonStore = useCommonStore();
defineProps({
  storeList: {
    type: Array,
    default: () => [],
  },
});

</script>

<style lang="scss" scoped>
.store-list {
  .store-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #f0f0f0;

    .store-info {
      display: flex;
      align-items: center;
      padding: 6rpx 20rpx;
      background-color: #d7d7d2;
      border-radius: 6rpx;
      color: #343434;
      box-sizing: border-box;
      gap: 10rpx;
      margin-bottom: 44rpx;

      .store-name {
        font-size: 26rpx;
      }

      .store-distance {
        font-size: 19rpx;
      }

      .expand-icon {
        width: 20rpx;
        height: 20rpx;
        margin-left: auto;
        background-color: #f0f0f0;
      }
    }
  }
}
</style>